<template>
  <div class="box">
    <h3>官方版</h3>
    <div class="ul">
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="goMusicllist(item.id)"
      >
        <img :src="item.coverImgUrl" alt="" />
        <div>
          <ol type="1">
            <li v-for="(k, i) in item.tracks" :key="i">
              {{ k.first }}-{{ k.second }}
            </li>
          </ol>
        </div>
      </li>
      <br />
    </div>
    <h3>全球榜</h3>
    <div class="global">
      <li
        v-for="(item, index) in global_list"
        :key="index"
        @click="goMusicllist(item.id)"
      >
        <img :src="item.coverImgUrl" alt="" />
        <p>{{ item.name }}</p>
        <span class="num">{{ item.playCount | playcount }}</span>
      </li>
      <br />
    </div>
    <van-overlay :show="show" class-name="mymask">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { getRank_detail } from "../api/rank";
export default {
  data() {
    return {
      list: "",
      global_list: "",
      show: true,
    };
  },
  methods: {
    goMusicllist(id) {
      this.$router.push({
        path: "/rank/musiclist",
        query: { id },
      });
      // console.log(id);
    },
  },
  created() {
    getRank_detail().then((data) => {
      if (data.code == 200) {
        this.show = false;
        this.list = data.list.splice(0, 4);
        this.global_list = data.list;
      }
    });
  },
  filters: {
    playcount(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? (w / 10000).toFixed(2) + "亿" : w.toFixed(1) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less">
.mymask{
  background-color: rgba(255, 255, 255, 0.5);
}
h3 {
  margin: 0 10px;
  font-size: 0.6em;
}
.box {
  background-color: #f2f3f4;
  padding-top: 10px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.ul {
  list-style: none;
  margin: 0;
  padding: 10px;
  & > li {
    display: flex;
    height: 2.25rem;
    padding: 0.125rem 0;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    img {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 8px;
    }
    div {
      height: 100%;
      flex: 1;
      ol {
        height: 100%;
        list-style-type: decimal;
        list-style-position: inside;
        padding-left: 0.3125rem;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        li {
          font-size: 3vw;
          color: #474747;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.global {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  & > li {
    width: 33.33%;
    padding: 0.125rem 0;
    position: relative;
    img {
      width: 96%;
      border-radius: 8px;
    }
    .num {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 0.234375rem;
      color: #fff;
    }
    p {
      font-size: 3vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>